<template>
	<el-container class="bg-white rounded" :style="{ height: (h + 'px')}">
		<el-header class="image-heade">
			<el-button type="primary" size="small" @click="handleOpenCreate">
				新增图片分类
			</el-button>
		</el-header>
		<el-container>
			<ImageAside ref="ImageAsideRef" @change="handleAsideChange"/>
			<ImageMain ref="ImageMainRef"/>
		</el-container>
	</el-container>
</template>

<script setup>
	
	import { ref } from "vue";
	import ImageAside from "~/components/ImageAside.vue"
	import ImageMain from "~/components/ImageMain.vue"

	const windowHeight = window.innerHeight || document.body.clientHeight
	const h = windowHeight - 64 - 44 - 40
	
	const ImageAsideRef = ref(null)
	const handleOpenCreate = ()=>ImageAsideRef.value.handleCreate()
	
	const ImageMainRef = ref(null)
	const handleAsideChange = (image_class_id)=>ImageMainRef.value.loadData
	(image_class_id)
</script>

<style>
	.image-heade{
		border-bottom: 1px solid #eeeeee;
		@apply flex item-center:
	}
	.image-aside{
		border-right: 1px solid #eeeeee;
		position: relative;
	}
	.image-main{
		position:relative;
	}
	.image-aside .top,.image-main .top{
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 50px;
		overflow: auto;
	}
	.image-aside .bottom,.image-main .bottom{
		position: absolute;
		bottom: 0;
		height: 50px;
		left: 0;
		right: 0;
		@apply flex items-center justify-center;
		
	}
</style>

